<template>
  <div class="warp-box">
    <div>
      <el-row>
        <el-col :span="8" class="login-content" />
        <el-col :span="8" class="login-content" style="margin-top: 10%;">
          <el-card class="box-card" style="background-color: rgba(20, 44, 71, 0.8);">
            <div>
              <div style="text-align: center;margin-top: 5%;">
                <img src="../assets/img/Flogo.png" alt="" />
              </div>
              <div style="text-align: center;margin-top: 7%;margin-bottom: 5%;">
                <span style="font-size: 27px;font-weight: 600;color:white">
                  SEQUENCE REGISTRATION SYSTEM
                </span>
              </div>
              <n-form ref="formRef" :model="model" :rules="rules">
                <n-form-item path="age" style="margin: 0 25%;height: 50px;">
                  <el-input
                    v-model="model.username"
                    class="w-50 m-2"
                    placeholder="user account"
                    size="large"
                    :prefix-icon="Avatar"
                  >
                    <el-icon><avatar /></el-icon>
                  </el-input>
                </n-form-item>
                <n-form-item path="password" style="margin: 0 25%;height: 50px;">
                  <el-input
                    v-model="model.password"
                    class="w-50 m-2"
                    placeholder="password"
                    size="large"
                    show-password
                    :prefix-icon="Lock"
                  />
                </n-form-item>
                <n-form-item path="password" style="margin: 0 25%;height: 50px;">
                  <el-checkbox v-model="checked1" label="Remember me" size="large" />
                </n-form-item>
                <n-row :gutter="[0, 24]">
                  <n-col :span="24">
                    <div style="margin: 5% 25%;">
                      <n-button
                        color="#1e88e5"
                        style="width: 100%"
                        :disabled="model.age === null"
                        type="primary"
                        @click="jnjtrialvizLoign"
                      >
                        Login
                      </n-button>
                    </div>
                  </n-col>
                </n-row>
              </n-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" />
        <el-col :span="8" style="text-align: center;margin-top: 260px;margin-bottom: 20px;">
          <el-footer height="auto" class="pa-3">
            <span class="caption"> &copy; Copyright {{ new Date().getFullYear() }} , RVAC MEDICINE </span>
          </el-footer>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { Person, LockOpen } from "@vicons/ionicons5";
import { useRouter } from "vue-router";
import { Avatar, Lock } from "@element-plus/icons-vue";
interface Imodel {
  username: string;
  password: string;
}
export default defineComponent({
  components: {
    // Person,
    // LockOpen,
    // Avatar,
    // Lock
  },
  setup() {
    const router = useRouter();
    const formRef = ref(null);
    const model: Imodel = reactive({
      username: "",
      password: "",
    });
    const jnjtrialvizLoign = () => {
      if ((model.username === "admin" || model.username === "sheng") && (model.password === "111111" || model.password === "111111")) {
        router.push({
          name: "Home",
        });
      }
    };
    const checked1 = ref("");
    return {
      formRef,
      model,
      jnjtrialvizLoign,
      checked1,
      Avatar,
      Lock
    };
  },
});
</script>
<style lang="scss" scoped>
.caption {
  color: white;
}
.warp-box {
  /*padding: 24px 0 0 0;*/
  /*width: 400px;*/
  background-image: url("../assets/img/login.jpg");
  background-repeat:no-repeat;
  background-size: cover;
  /*margin-top: 84px;*/
  /*position: fixed;*/
  /*top: 20%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  & .login-text {
    height: 64px;
    color: #ffffff;
    background: #1e88e5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 20px;
  }
  & .login-content {
    ::v-deep .n-input .n-input-wrapper {
      padding: 0 !important;
    }
    ::v-deep .n-input.n-input--resizable.n-input--stateful {
      margin-left: 10px;
    }
    ::v-deep label.n-form-item-label {
      margin-left: 30px;
    }
  }
}
</style>
